import styled from "./index.module.less";
import {
  Grid,
  ButtonGroup,
  Popover,
  OptionList,
  Icon,
  Badge,
  Button,
  LegacyCard,
  IndexTable,
  Text,
  Link,
  Modal,
  TextContainer,
  TextField,
  SkeletonPage,
  Layout,
  SkeletonBodyText,
  SkeletonDisplayText,
  Loading,
  Frame,
  Thumbnail,
} from "@shopify/polaris";
import {
  MobileBackArrowMajor,
  ChevronLeftMinor,
  ChevronRightMinor,
  CirclePlusOutlineMinor,
  MobileCancelMajor,
  ArchiveMinor,
  PrintMinor,
  ViewMinor,
  MobileHorizontalDotsMajor,
  EditMajor,
  ShipmentMajor,
  HorizontalDotsMinor,
  MarkPaidMinor,
} from "@shopify/polaris-icons";
import { useState, useCallback, useEffect } from "react";
import { PostOrderXiangQingApi } from "../../../api/order";
import TJYDModal from "./Tianjiayundanxinxi";
import BJDDModal from "./bianjidindan";

import { useNavigate } from "react-router-dom";
import BiaoqinMoadal from "../../customers/components/xiangqing/component/biaoqingshuru";

const App = () => {
  const navigate = useNavigate();
  //分页
  const handleFirstButtonClick = () => {
    console.log("上一页");
  };
  const handleSecondButtonClick = () => {
    console.log("下一页");
  };
  //其他操作
  const [popoverActive, setPopoverActive] = useState(false);

  const togglePopoverActive = useCallback(
    () => setPopoverActive((popoverActive) => !popoverActive),
    []
  );
  const [selected, setSelected] = useState<string[]>([]);

  const activator = (
    <Button size="slim" disclosure onClick={togglePopoverActive}>
      其他操作
    </Button>
  );

  const [show, setShow] = useState(false);
  //TextField
  const [value, setValue] = useState("");

  const handleTextFieldChange = useCallback(
    (newValue: string) => setValue(newValue),
    []
  );

  //Modal
  const [active, setActive] = useState(false);

  const handleChange = useCallback(() => setActive(!active), [active]);

  const [orders, setOrders] = useState({} as ORDERMODULE.Items2);
  const [get_order_log, setGet_order_log] = useState([
    {},
  ] as ORDERMODULE.TimeLine[]);
  const [get_delivery, setGet_delivery] = useState({
    alias: "",
    content: "",
  });
  const [get_order_product, setGet_order_product] = useState(
    {} as ORDERMODULE.Get_Order_Product
  );

  useEffect(() => {
    PostOrderXiangQingApi({
      format: "json",
      is_get_log: 1,
      method: "get.order.item",
      order_no: JSON.parse(localStorage.getItem("xiangqing") as string),
      sign: "d9db87284efe178e8ae7f2acb56a5f3d",
      store_locale: "en_US",
      timestamp: 1691398894,
      token: "9d486d74d765e9b033ee6f667d137a0a",
    }).then((res) => {
      // console.log(res);
      setOrders(res.data);
      setGet_order_product(res.data.get_order_product[0]);
      setGet_delivery(res.data.get_delivery);
      setGet_order_log(res.data.get_order_log);
      setShow(true);
    });
  }, []);

  const resourceName = {
    singular: "order",
    plural: "orders",
  };

  //标签
  const [valueBQ, setValueBQ] = useState("");

  const handleChangeBQ = useCallback(
    (newValue: string) => setValueBQ(newValue),
    []
  );

  //客户
  const [popoverActiveKH, setPopoverActiveKH] = useState(false);

  const togglePopoverActiveKH = useCallback(
    () => setPopoverActiveKH((popoverActive) => !popoverActive),
    []
  );

  const activatorKH = (
    <div style={{ cursor: "pointer" }} onClick={togglePopoverActiveKH}>
      <Icon source={MobileHorizontalDotsMajor}></Icon>
    </div>
  );
  const [selectedKH, setSelectedKH] = useState<string[]>([]);

  //icon
  const iconContent = () => {
    return (
      <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <circle cx="10" cy="10" r="4" />
      </svg>
    );
  };

  //已发货
  const [popoverActiveYFH, setPopoverActiveYFH] = useState(false);

  const togglePopoverActiveYFH = useCallback(
    () => setPopoverActiveYFH((popoverActive) => !popoverActive),
    []
  );

  const activatorYFH = (
    <div style={{ cursor: "pointer" }} onClick={togglePopoverActiveYFH}>
      <Icon source={HorizontalDotsMinor}></Icon>
    </div>
  );

  const [selectedYFH, setSelectedYFH] = useState<string[]>([]);

  const rowMarkup = (
    <IndexTable.Row id={orders.order_no} key={orders.order_no} position={1}>
      <IndexTable.Cell>
        <Text variant="bodyMd" fontWeight="bold" as="span">
          {get_order_product.product_image && (
            <img
              src={
                "http://" +
                get_order_product.product_image +
                "?code=product_image_x80"
              }
              alt=""
              style={{ width: "60px" }}
            />
          )}
        </Text>
      </IndexTable.Cell>
      <IndexTable.Cell>
        <div>
          <div style={{ fontSize: "13px" }}>
            <Link
              url={"product/" + get_order_product.product_id}
              dataPrimaryLink
              onClick={() => {
                localStorage.setItem(
                  "ProductXiangqing",
                  String(get_order_product.product_id)
                );
              }}
            >
              {get_order_product.product_name}
            </Link>
          </div>
          <div style={{ fontSize: "12px", color: "green" }}>
            {String(get_order_product.product_name).slice(-17)}
          </div>
        </div>
      </IndexTable.Cell>
      <IndexTable.Cell>
        <div style={{ fontSize: "13px" }}>
          {"$" + get_order_product.price}*{get_order_product.quantity}
        </div>
      </IndexTable.Cell>
      <IndexTable.Cell>
        <div style={{ fontSize: "13px" }}>{"$" + orders.product_amount}</div>
      </IndexTable.Cell>
      <IndexTable.Cell>
        <div style={{ fontSize: "13px" }}>{orders.delivery_status_text}</div>
      </IndexTable.Cell>
    </IndexTable.Row>
  );

  //运单信息
  const [activeYDXX, setActiveYDXX] = useState(false);
  //编辑订单
  const [activeBJDD, setActiveBJDD] = useState(false);

  return (
    <div className={styled.box}>
      {show && (
        <div className={styled.box1}>
          <div className={styled.header}>
            <div className={styled.headerLeft}>
              <div className={styled.title}>
                <div
                  style={{ cursor: "pointer" }}
                  onClick={() => {
                    window.history.back();
                  }}
                >
                  <Icon source={MobileBackArrowMajor}></Icon>
                </div>
                <div className={styled.DDXQY}>订单详情</div>
              </div>
              <div className={styled.badge}>
                {
                  [
                    <Badge progress="incomplete">未发货</Badge>,
                    <Badge progress="complete">已发货</Badge>,
                  ][1]
                }
              </div>
              <div>
                {
                  [
                    <Badge progress="incomplete">未付款</Badge>,
                    <Badge progress="complete">已付款</Badge>,
                  ][1]
                }
              </div>
              <div style={{ marginLeft: "5px" }}>
                {[<Badge>未存档</Badge>, <Badge>已存档</Badge>][1]}
              </div>
            </div>
            <div className={styled.headerRight}>
              <div>
                <Button
                  size="slim"
                  onClick={() => {
                    navigate("/order/:id/return");
                  }}
                >
                  退货
                </Button>
              </div>
              <div
                className={styled.button}
                onClick={() => {
                  setActiveBJDD(true);
                }}
              >
                <Button size="slim">编辑</Button>
              </div>
              <div>
                <Popover
                  active={popoverActive}
                  activator={activator}
                  autofocusTarget="first-node"
                  onClose={togglePopoverActive}
                >
                  <OptionList
                    title=""
                    onChange={setSelected}
                    options={[
                      {
                        value: "byward_market",
                        label: (
                          <div className={styled.QTCZChildren}>
                            <div>
                              <Icon source={CirclePlusOutlineMinor}></Icon>
                            </div>
                            <div className={styled.PaDdING}>复制</div>
                          </div>
                        ),
                      },
                      {
                        value: "centretown",
                        label: (
                          <div className={styled.QTCZChildren}>
                            <div>
                              <Icon source={MobileCancelMajor}></Icon>
                            </div>
                            <div className={styled.PaDdING}>取消订单</div>
                          </div>
                        ),
                      },
                      {
                        value: "hintonburg",
                        label: (
                          <div className={styled.QTCZChildren}>
                            <div>
                              <Icon source={ArchiveMinor}></Icon>
                            </div>
                            <div className={styled.PaDdING}>取消存档</div>
                          </div>
                        ),
                      },
                      {
                        value: "westboro",
                        label: (
                          <div className={styled.QTCZChildren}>
                            <div>
                              <Icon source={PrintMinor}></Icon>
                            </div>
                            <div className={styled.PaDdING}>打印订单页</div>
                          </div>
                        ),
                      },
                      {
                        value: "downtown",
                        label: (
                          <div className={styled.QTCZChildren}>
                            <div>
                              <Icon source={PrintMinor}></Icon>
                            </div>
                            <div className={styled.PaDdING}>打印装箱单</div>
                          </div>
                        ),
                      },
                      {
                        value: "downtown",
                        label: (
                          <div className={styled.QTCZChildren}>
                            <div>
                              <Icon source={ViewMinor}></Icon>
                            </div>
                            <div className={styled.PaDdING}>
                              查看订单状态页面
                            </div>
                          </div>
                        ),
                      },
                    ]}
                    selected={selected}
                  />
                </Popover>
              </div>
              <div className={styled.button}>
                <ButtonGroup segmented>
                  <Button
                    size="slim"
                    onClick={handleFirstButtonClick}
                    icon={ChevronLeftMinor}
                  ></Button>
                  <Button
                    size="slim"
                    onClick={handleSecondButtonClick}
                    icon={ChevronRightMinor}
                  ></Button>
                </ButtonGroup>
              </div>
            </div>
          </div>
          <div className={styled.tabs}>2022年1月6日 9:54 来自 草稿订单</div>
          <Grid>
            <Grid.Cell columnSpan={{ xs: 6, sm: 6, md: 6, lg: 12, xl: 8 }}>
              <div className={styled.pink}>
                <LegacyCard sectioned>
                  <div className={styled.Topheader}>
                    <div className={styled.YFHSAW}>
                      <div className={styled.YFH}>
                        <div>
                          <Icon source={ShipmentMajor} color="success"></Icon>
                        </div>
                        <div>已发货 (1)</div>
                      </div>
                      <div className={styled.fhuid}>#1001-F1</div>
                    </div>
                    <Popover
                      active={popoverActiveYFH}
                      activator={activatorYFH}
                      autofocusTarget="first-node"
                      onClose={togglePopoverActiveYFH}
                    >
                      <OptionList
                        title=""
                        onChange={setSelectedYFH}
                        options={[
                          {
                            value: "byward_market",
                            label: <div>打印装箱单</div>,
                          },
                          {
                            value: "centretown",
                            label: (
                              <div style={{ color: "#8E1F0D" }}>取消发货</div>
                            ),
                          },
                        ]}
                        selected={selectedYFH}
                      />
                    </Popover>
                  </div>
                  <div className={styled.LCcontent}>
                    <div className={styled.LCTOP}>
                      <div>
                        <div className={styled.DDJIK}>地点</div>
                        <div className={styled.DDIJL}>
                          Huaqiao room 1706, DaQiao Road 1
                        </div>
                      </div>
                      <div className={styled.JIODD}>
                        <div className={styled.DDJIK}>已发货</div>
                        <div className={styled.DDIJL}>2022年2月6日</div>
                      </div>
                    </div>
                    <div className={styled.LCFOOTER}>
                      <div>
                        <Thumbnail
                          size="small"
                          source={
                            "https://" +
                            orders.get_order_product[0].product_image
                          }
                          alt="Black choker necklace"
                        />
                      </div>
                      <div className={styled.titlePrice}>
                        <div>{"#" + orders.order_no}</div>
                        <div className={styled.MiddleLLL}>
                          {"￥" +
                            orders.get_order_product[0].price +
                            "x" +
                            orders.get_order_product[0].quantity}
                        </div>
                        <div className={styled.RighTJD}>
                          {"￥" + orders.get_order_product[0].total_price}
                        </div>
                      </div>
                    </div>
                  </div>
                  <div
                    className={styled.YFHBTN}
                    onClick={() => {
                      setActiveYDXX(true);
                    }}
                  >
                    <Button primary size="slim">
                      添加运单信息
                    </Button>
                  </div>
                </LegacyCard>
                <LegacyCard sectioned>
                  <div className={styled.YFKBTN}>
                    <div>
                      <Icon source={MarkPaidMinor} color="subdued"></Icon>
                    </div>
                    <div>已付款</div>
                  </div>
                  <div className={styled.LCcontent}>
                    <div className={styled.LCTOP}>
                      <div className={styled.HUFRE}>
                        <div>小计</div>
                        <div className={styled.TRESD}>
                          {orders.get_order_product[0].quantity}件产品
                        </div>
                        <div>￥{orders.get_order_product[0].total_price}</div>
                      </div>
                      <div className={styled.HUFRE}>
                        <div>运费</div>
                        <div>￥{orders.delivery_amount}</div>
                      </div>
                      <div className={styled.RDHUK}>
                        <div>总计</div>
                        <div>￥{orders.total_amount}</div>
                      </div>
                    </div>
                    <div className={styled.LCFOOTERs}>
                      <div>
                        <div>客户付款</div>
                      </div>
                      <div>￥{orders.able_refund_amount}</div>
                    </div>
                  </div>
                </LegacyCard>
                <div className={styled.SJX}>时间线</div>
                <LegacyCard title="" sectioned>
                  {/* <div className={styled.RiceTOP}></div>
                  <div className={styled.RiceFOOTER}></div> */}
                  <BiaoqinMoadal />
                </LegacyCard>
                <div className={styled.ALEND}>只有您和其他员工可以查看评论</div>
                <div className={styled.XRIGHT}>
                  <div className={styled.START}>2022年3月7日</div>
                  <div className={styled.footer}>
                    <div>已创建客户</div>
                    <div className={styled.time}>11:50</div>
                  </div>
                  <div className={styled.POSITION}>
                    <div>
                      <Icon source={iconContent} />
                    </div>
                  </div>
                  <div className={styled.ZZ}></div>
                </div>
              </div>
            </Grid.Cell>
            <Grid.Cell columnSpan={{ xs: 6, sm: 6, md: 6, lg: 12, xl: 4 }}>
              <div className={styled.pink}>
                <div className={styled.CardRight}>
                  <LegacyCard sectioned>
                    <div className={styled.titlesdasdd}>
                      <div>备注</div>
                      <div
                        onClick={() => {
                          setActive(true);
                        }}
                        style={{ cursor: "pointer" }}
                      >
                        <Icon source={EditMajor}></Icon>
                      </div>
                    </div>
                    <p className={styled.beizhu}>{`订单暂时未备注`}</p>
                  </LegacyCard>
                  <LegacyCard>
                    <div
                      style={{
                        fontSize: "14px",
                        fontWeight: "600",
                        display: "flex",
                        justifyContent: "space-between",
                        alignItems: "center",
                        padding: "8px 16px 4px",
                        paddingTop: "16px",
                      }}
                    >
                      <div>客户</div>
                      <Popover
                        active={popoverActiveKH}
                        activator={activatorKH}
                        autofocusTarget="first-node"
                        onClose={togglePopoverActiveKH}
                      >
                        <OptionList
                          title=""
                          onChange={setSelectedKH}
                          options={[
                            {
                              value: "byward_market",
                              label: <div>编辑联系信息</div>,
                            },
                            {
                              value: "centretown",
                              label: <div>编辑收货地址</div>,
                            },
                            {
                              value: "hintonburg",
                              label: (
                                <div style={{ color: "red" }}>删除客户</div>
                              ),
                            },
                          ]}
                          selected={selectedKH}
                        />
                      </Popover>
                    </div>

                    <div className={styled.pinks}>
                      <div className={styled.goods1}>
                        <Link>JessicaMalambri</Link>
                      </div>
                      <div className={styled.goods1}>1订单</div>
                    </div>

                    <div className={styled.pinks}>
                      <div className={styled.HUJYI}>
                        <div className={styled.goods}>联系信息</div>
                        <div className={styled.goods1}>未提供电子邮件</div>
                        <div className={styled.goods1}>没有电话号码</div>
                      </div>
                      <div className={styled.HUJYI}>
                        <div className={styled.goods}>收货地址</div>
                        <div className={styled.goods1}>未提供收货地址</div>
                      </div>
                      <div className={styled.HUJYI}>
                        <div className={styled.goods}>账单地址</div>
                        <div className={styled.goods1}>未提供账单地址</div>
                      </div>
                    </div>
                  </LegacyCard>
                  <LegacyCard sectioned>
                    <div className={styled.titlesdasdd}>
                      <div>转化摘要</div>
                    </div>
                    <p
                      className={styled.beizhu}
                    >{`此订单没有任何转化详细信息。`}</p>
                    <Link>了解详细信息</Link>
                  </LegacyCard>
                  <LegacyCard sectioned>
                    <div className={styled.titlesdasdd}>
                      <div>欺诈分析</div>
                    </div>
                    <p className={styled.beizhu}>{`未提供足够信息判断`}</p>
                  </LegacyCard>
                  <LegacyCard sectioned>
                    <div className={styled.titlesdasdd}>
                      <div>标签</div>
                      <div style={{ cursor: "pointer" }}>
                        <Icon source={EditMajor}></Icon>
                      </div>
                    </div>
                    <TextField
                      label=""
                      value={valueBQ}
                      onChange={handleChangeBQ}
                      autoComplete="off"
                    />
                  </LegacyCard>
                </div>
              </div>
            </Grid.Cell>
          </Grid>
          <div className={styled.FooterBtnS}>
            <Button destructive size="slim">
              删除订单
            </Button>
          </div>
          {/* 组件 */}
          <TJYDModal active={activeYDXX} setActive={setActiveYDXX} />
          <BJDDModal active={activeBJDD} setActive={setActiveBJDD} />
          {/* 组件 */}
        </div>
      )}
    </div>
  );
};

export default App;
